<template>
  <q-list separator no-border dense class="relative-position bg-white round-borders"  :class="{'shadow-light': $q.screen.gt.md}">
    <q-inner-loading :visible="loading">
      <q-spinner-Dots size="50px" color="primary"></q-spinner-Dots>
    </q-inner-loading>
    <!--<q-list-header class="row" style="border-bottom: 1px solid #ddd">-->
      <!--<q-item-section class="row">-->
        <!--<div class="col-6">标题</div>-->
        <!--<div class="col-3 gt-md">协作者</div>-->
        <!--<div class="col-1 gt-md">更新</div>-->
        <!--<div class="col-1 gt-md">发布</div>-->
        <!--<div class="col-1 gt-md">点赞</div>-->
      <!--</q-item-section>-->
      <!--<q-item-side class="text-center">操作</q-item-side>-->
    <!--</q-list-header>-->
    <div v-if="maps.length === 0">
      <a-none></a-none>
    </div>
    <q-item v-for="(map, index) in maps" :key="index">
      <q-item-section :class="{'text-grey-5': loading, 'text-grey-9': !loading}">
        <div class="col row items-center">
          <div class="col-6 row items-center">
            <a class="text-black article-link cursor-pointer" @click="openViewMapLink(map)">{{ map.name || '未命名地图' }}</a>
            <q-icon v-if="map.version === '2.0.0'" name="info" color="primary" class="size-18 q-ml-xs">
              <q-tooltip>
                此地图版本较旧，无法使用最新的地图编辑器，请选择升级
              </q-tooltip>
            </q-icon>
          </div>
          <div class="col-3 row gt-md">
            <a-heads :user="map.add_user" :editors="map.editors" :size="24" :username="false"></a-heads>
          </div>
          <div class="col-1 gt-md size-14">{{ timesince(map.update_date) }}</div>
          <div class="col-1 gt-md">
            <q-icon v-if="map.is_public" name="done" color="positive"/>
            <q-icon v-else name="not_interested" color="grey"/>
          </div>
          <div class="col-1 gt-md size-14">{{ map.up_number || "" }}</div>
        </div>
      </q-item-section>
      <q-item-section side>
        <q-btn flat dense round color="grey-8" icon="more_vert">
          <q-menu>
            <q-list link class="text-grey-8" style="min-width: 160px">
              <q-item class="size-14" v-close-popup @click.native="openViewMapLink(map)">
                <div class="col">浏览</div>
                <q-icon name="open_in_new"/>
              </q-item>
              <q-item v-if="$q.screen.gt.md" class="size-14" v-close-popup @click.native="openEditMapLink(map.id)">
                <div class="col">编辑</div>
                <q-icon name="edit"/>
              </q-item>
              <!--<q-item v-if="type==='maps'" class="size-14" separator v-close-popup @click.native="onMenuClick(map.id, 'editors')">-->
                <!--<div class="col">协作者</div>-->
                <!--<q-icon name="people"/>-->
              <!--</q-item>-->
              <!--<q-item class="size-14">-->
                <!--<div class="col">版本管理</div>-->
                <!--<q-icon name="restore"/>-->
              <!--</q-item>-->
              <q-item class="size-14" v-close-popup @click.native="shareDialogId = map.id">
                <div class="col">分享</div>
                <q-icon name="share"/>
              </q-item>
              <!--<q-item class="size-14">-->
                <!--<div class="col">复制</div>-->
                <!--<q-icon name="file_copy"/>-->
              <!--</q-item>-->
              <q-item v-if="type==='maps' && map.version === '2.0.0'" class="size-14" v-close-popup @click.native="onMenuClick(map.id, 'update')">
                <div class="col">升级</div>
                <q-icon name="update"/>
              </q-item>
              <q-item v-if="type==='maps'" class="size-14" separator v-close-popup @click.native="onMenuClick(map.id, 'delete')">
                <div class="col">删除</div>
                <q-icon name="delete"/>
              </q-item>
              <q-item v-if="type==='share'" class="size-14" v-close-popup separator @click.native="onMenuClick(map.id, 'quit')">
                <div class="col">
                  <span>退出</span>
                </div>
                <q-icon name="delete"/>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-item-section>
    </q-item>
    <a-dialog v-model="shareDialogId" title="分享" icon="share">
      <a-share-dialog v-if="shareDialogId" :title="shareTitle" :link="shareLink"></a-share-dialog>
    </a-dialog>
  </q-list>
</template>

<script>
  import { openURL } from 'quasar'

  export default {
    name: 'aMapList',
    props: {
      maps: {
        type: Array,
        required: true
      },
      type: {
        type: String,
        required: false,
        default: 'maps'
      },
      loading: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    computed: {
      shareLink () {
        const id = this.shareDialogId

        if (!id) {
          return ''
        } else {
          return `https://www.ageeye.cn/map/${id}`
        }
      },
      shareTitle () {
        const id = this.shareDialogId

        for (const map of this.maps) {
          if (map.id === id) {
            return map.name || '未命名地图'
          }
        }

        return null
      }
    },
    data () {
      return {
        shareDialogId: null
      }
    },
    methods: {
      onMenuClick (id, action) {
        this.$emit('menuClick', { id, action })
      },
      openEditMapLink (id) {
        openURL(`https://www.ageeye.cn/map/edit/?pk=${id}`)
      },
      openViewMapLink (map) {
        const id = map.id

        if (map.is_public) {
          this.$router.push(`/map/${id}/`)
        } else {
          openURL(`https://www.ageeye.cn/map/${id}/?static=0`)
        }
      }
    }
  }
</script>

<style>

</style>
